<template>
    <li class="tabItem" :id="id" :class="{'selectedItem':id == selected}">
        <div class="icon-Left">
            <slot name="left"></slot>
        </div>
        <div class="title-center">
            <slot name="center"></slot>
        </div>

        <div class="icon-Right">
            <slot name="right"></slot>
        </div>
    </li>
</template>
<script>
    export default {
        props:['id','selected_'],
        created(){
            setTimeout(()=>{
                this.selected = this.selected_;
            },0)
        },
        data(){
            return {
                selected:""
            }
        },
        watch:{
            selected_(value){
                this.selected = value;
            }
        }
    }
</script>